<?php
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
    $imageTag="https://api.instagram.com/v1/tags/" . $tag['User']['tag'] ."/media/recent?access_token=7636074.f59def8.a69157b4454e46b3b69aaf932d66b7ba&callback=?";
    $location=$tag['User']['location'];
?>
<style>
#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
}
</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="https://github.com/douglascrockford/JSON-js"></script>

<?php echo $this->Html->script('main'); ?>

<script type="text/javascript">
    var map = null;
    var geocoder = null;
    toAdd = [];

    function add(image) {
        toAdd.push(image);
    }
    function initialize() {
      if (GBrowserIsCompatible()) {
        if (map==null) {
            map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        }
        if (geocoder==null)
            geocoder = new GClientGeocoder();
      }
    }

    $(document).ready(function(){
      var byTag = "<?php echo $imageTag?>";
      $.getJSON(byTag, function(dt) {
          $.each(dt.data, function(i,item){
            $("#images").append('<div style="float: left;width: 225px; height: 325px; margin:0px auto;"><a href="'+"/instagram/users/showImage/"+item.id+'" class="preview"> <img src="'+item.images.standard_resolution.url+'" alt="Loading" width="200" height="200"> </a>\n\
            <img style="float: left;" width="50" height="50" src="'+item.user.profile_picture+'">'+'<br>'+item.user.username+'</div>');
          if ( i == 100 ) return false;
        });
      });

      showAddress("<?php echo $location?>")
    });

    function showAddress(address) {
      if (geocoder==null)
        geocoder = new GClientGeocoder();
      if (map==null) {
            map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
            } else {
              map.setCenter(point, 13);
              map.setMapType(G_HYBRID_MAP);
              map.setUIToDefault();
              map.enableRotation();
              var marker = new GMarker(point);
              var pt = marker.getPoint();
              map.addOverlay(marker);
              // As this is user-generated content, we display it as
              // text rather than HTML to reduce XSS vulnerabilities.
              marker.openInfoWindow(document.createTextNode(address));
              var latitude = pt.lat().toFixed(5);
              var longtitude = pt.lng().toFixed(5);
              $.getJSON("https://api.instagram.com/v1/locations/search?lat="+latitude+"&lng="+longtitude+"&access_token=7636074.f59def8.a69157b4454e46b3b69aaf932d66b7ba&callback=?", function(dt) {
                $.each(dt.data, function(i,item){
                    $.getJSON("https://api.instagram.com/v1/locations/"+item.id+"/media/recent/?access_token=7636074.f59def8.a69157b4454e46b3b69aaf932d66b7ba&callback=?", function(dt) {
                        $.each(dt.data, function(i,item){
                            $("#images").append('<div style="float: left;width: 225px; height: 325px; margin:0px auto;"><a href="'+"/instagram/users/showImage/"+item.id+'" class="preview"> <img src="'+item.images.standard_resolution.url+'" alt="Loading" width="200" height="200"> </a>\n\
                             <img style="float: left;" width="50" height="50" src="'+item.user.profile_picture+'">'+'<br>'+item.user.username+'</div>');
                            //alert(JSON.stringify(item.user));
   
                            //$("#images").append('<img src="'+item.images.standard_resolution.url+'" alt="Loading"></img>');
                            //image = {image : item.images.standard_resolution.url};
                            //add({image: item.images.standard_resolution.url });
                            //toAdd.push(image);
                        });
                    });
                });
              });
            }
          }
        );
      }
    }

</script>
<body onload="initialize()" onunload="GUnload()">
    <div id="content">
        <?php
            echo $this->Form->create('User', array('action' => 'search'));
            echo $this->Form->input('tag');
            echo $this->Form->input('location');
            echo $this->Form->end('Submit');
        ?>
    </div>
    <div id="canvas_container" style="width: 950px; height: 500px;float:left">
        <div id="map_canvas" style="width: 500px; height: 500px; margin:0px auto;"></div>
    </div>
    <div name="blank" style="width: 950px; height: 100px;float:left"></div>
        <div id="images" style="width: 900px; height: 500px; margin:0px auto;">
        </div>
</body>